<template>
  <div class="goodsinfo-box">
    <Title title="商品管理" style="margin-bottom:18px;"/>
    <el-row :class="{'dividing':!showMobilePage}" class="detail-row">
      <el-form label-position="right" label-width="125px">
        <el-col :span="8">
          <el-form-item label="仓库：">
            <span>{{ data.warehouse || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本价(元)：">
            <PriceColumn :real-val="data.cost" :price="data.cost / 100" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="处理状态：">
            <span>{{ data.dealStatus | formatDealStatus }}</span>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { format } from '@/filters/date';
import { formatDealStatus } from '@/filters/status';
import { mapState } from 'vuex';
export default {
  filters: { format, formatDealStatus },
  components: { Title },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  }
};
</script>

<style lang="scss" scoped>
.goodsinfo-box{
  margin-top: 20px;
}
::v-deep .el-col {
  .el-form-item{
    margin-bottom: 0;
  }
}
.dividing {
  &::v-deep .el-col {
    .el-form-item__content {
      border-right: 1px solid #EBEEFD !important;
    }
    &:nth-child(3n) {
      .el-form-item__content {
        border-right: none !important;
      }
    }
    &:last-child {
      .el-form-item__content {
        border-right: none;
      }
    }
  }
}
</style>
